<template>
  <div class="article_list">
    <el-row :gutter="20">
      <el-col :span="20">
        <el-form inline size="mini">
          <el-form-item label="标题">
            <el-input placeholder="请输入标题"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
            <el-button type="primary">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4">
        <router-link to="/articleAdd">
          <el-button type="primary" size="mini">新增文章</el-button>
        </router-link>
      </el-col>
    </el-row>
    <el-table :data="articleData" border>
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column prop="f_title" label="标题">
        <template #default="scope">
          <p @click="openDialog(scope.row)">{{scope.row.f_title}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="f_author" label="作者" width="180" />
      <el-table-column prop="f_type_id" label="分类" width="180" />
      <el-table-column prop="f_create_time" label="创建时间" width="180">
        <template #default="scope">
          <span>{{DateFormat(scope.row.f_create_time)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button size="mini">编辑</el-button>
          <el-button size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible" :title="articleByIdCon?.f_title" width="30%">
      <div v-html="articleByIdCon?.f_content"></div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { Article } from '@/api/apiConfig'
import { DateFormat } from '@/utils/dateFormat'

export default defineComponent({
  setup() {
    let articleData = ref<any[]>([])
    let articleByIdCon = ref<any>()
    let dialogVisible = ref<boolean>(false)
    const getArticleList = () => {
      Article.getArticleList().then((res) => {
        articleData.value = res.data
      })
    }
    const openDialog = (articleCon) => {
      dialogVisible.value = true
      let params = {
        fId: articleCon.f_id,
      }
      Article.getArticleConById(params).then((res) => {
        articleByIdCon.value = res.data[0]
      })
    }
    onMounted(() => {
      getArticleList()
    })
    return {
      articleData,
      DateFormat,
      dialogVisible,
      openDialog,
      articleByIdCon,
    }
  },
})
</script>

<style lang="scss" scoped>
.article_list {
  margin: 0 15px;
}
</style>